<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子页面</title>
</head>
<body>
    <div> 子页面</div>
    <div id="calc">calc </div>
    <script>
    window.onload=(() => {
            window.addEventListener('message', (e) => {
            console.log(e.data)
            if(e.data.type === 'start'){
                calc()
            }
        })
        function calc() {
            let j = 100000
            while(j){
                let a = 0
                for(let i = 0; i < 100000; i++){
                    a = numAdd(a, i)
                }
                j--
                console.log('calc')
                document.getElementById('calc').innerHTML = 'calc a is '+ a
            }
            emitMessage('calcOk', 'calcOk '+Date())
        }
        function numAdd(a, b) {
            return a + b
        }
        // calc()
    })
    function emitMessage(type,data) {
        window.parent.postMessage( {type,data}, '*')
    }
    </script>
</body>
</html>